import React, { useState, useEffect, Fragment } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, Text, Image, ScrollView, TouchableOpacity, ViewStyle, ImageStyle, TextStyle } from 'react-native'
import { RadiusButton, InfoLayout } from 'components'
import assets from 'modules/assets'
import { translateSize, commonStyle, themeColors, definedColors } from 'styles'
import pos, { PosAppCustomer, PosCustomer, PosAppBank } from 'api/pos'
import { getAuthorization, operate } from 'services/authorization'
import Loading from 'components/loading'
import { PosAppZskOption } from '../../api/pos';

const ChooseCustomerScreen: NavigationStackScreenComponent<{ data: PosCustomer }> = props => {

	const [customerData, setCustomerData] = useState<PosAppCustomer>([]);
	const [currentCustomer, setCurrentCustomer] = useState<PosAppCustomer>({});
	const [bankList, setBankList] = useState<PosAppBank[]>([]);
	const [noData, setNoData] = useState(false)
	const [fundName, setFundName] = useState('暂收款')
	const [zskOptionList, setZskOptionList] = useState<PosAppZskOption[]>([]);

	useEffect(() => {
		Loading.show()
		pos.posApp.getZskFee({
			...props.navigation.getParam('data'),
			...{
				scene: 'szsk',
				projectId: getAuthorization().project.id
			}
		}).then(res => {
			if (res.customerList && res.customerList.length == 1) {

			}
			setCustomerData(res.customerList || []);
			if (!res.customerList || res.customerList.length < 1) {
				setNoData(true)
			}
			if (res.customer) {
				setCurrentCustomer(res.customer)
			} else {
				setCurrentCustomer(res.customerList && res.customerList.length > 0 ? res.customerList[0] : {})
			}

			setBankList(res.bankList || [])
			setFundName(res.fundName || '暂收款')
			setZskOptionList(res.zskOptionList || [])
		}).finally(() => { Loading.hide() })
	}, []);

	const renderItem = (item: PosAppCustomer) => {
		return (<View style={itemContainer} key={item.erpId}>
			<Image
				style={itemIcon}
				source={assets.images.icon_customer_male}
			/>
			<View style={itemContent}>
				<InfoLayout title='客户姓名：' titlePartner={<Text style={itemNameFont}>{item.name}</Text>} hideDivier={true} style={itemLayout} />
				<InfoLayout title='身份证号：' titlePartner={<Text style={itemTellFont}>{item.zjNumber}</Text>} hideDivier={true} style={itemLayout} />
				<InfoLayout title='电话号码：' titlePartner={<Text style={itemTellFont}>{item.tel}</Text>} hideDivier={true} style={itemLayout} />
			</View>
			<TouchableOpacity style={itemCheckContainer} onPress={() => {
				operate()
				setCurrentCustomer(item)
			}}>
				<Image
					resizeMode="cover"
					style={itemCheckImage}
					source={item.erpId == currentCustomer.erpId ? assets.images.icon_check : assets.images.icon_uncheck}
				/>
			</TouchableOpacity>
		</View>
		)
	}

	return <View style={[commonStyle.containerColumn, container]}>
		{noData ? (<Text style={commonStyle.noDataWarn}>未找到客户，请确认用户信息是否正确！</Text>) :
			(<Fragment><ScrollView>
				<View >
					{
						customerData.map(renderItem)
					}
				</View>
			</ScrollView>
				<RadiusButton style={{ backgroundColor: themeColors.pageBg, borderWidth: 1, borderColor: themeColors.primary }} onPress={() => {
					props.navigation.navigate('AdvanceFund', { customerInfo: currentCustomer, bankList, fundName, zskOptionList })
				}}>
					<Text style={{ fontSize: translateSize(28), color: themeColors.primary }}>下一步</Text>
				</RadiusButton></Fragment>)
		}
	</View>
}

ChooseCustomerScreen.navigationOptions = props => {
	return {
		title: '选择客户',
	}
}

const container: ViewStyle = {
	backgroundColor: themeColors.pageBg,
	padding: translateSize(32),
	height: '100%'
}


const itemContainer: ViewStyle = {
	width: '100%',
	height: translateSize(215),
	paddingLeft: translateSize(62),
	paddingVertical: translateSize(42),
	paddingRight: translateSize(30),
	flexDirection: 'row',
	alignItems: 'center',
	position: 'relative',
	backgroundColor: definedColors.white,
	borderRadius: translateSize(10),
	marginBottom: translateSize(32)
}

const itemIcon: ImageStyle = {
	width: translateSize(80),
	height: translateSize(80)
}

const itemContent: ImageStyle = {
	flexDirection: 'column',
	justifyContent: 'space-between',
	width: '100%',
	height: '100%'
}

const itemLayout: ViewStyle = {
	paddingTop: translateSize(0),
	paddingBottom: translateSize(0),
	paddingLeft: translateSize(55)
}

const itemTellFont: TextStyle = {
	fontSize: translateSize(24),
	color: definedColors.grayContent
}

const itemNameFont: TextStyle = {
	fontSize: translateSize(28),
	color: definedColors.gray33
}

const itemCheckContainer: ViewStyle = {
	position: 'absolute',
	right: 0,
	top: 0,
	padding: translateSize(28)
}

const itemCheckImage: ImageStyle = {
	width: translateSize(50),
	height: translateSize(50)
}

export default ChooseCustomerScreen